

import { useEffect, useState } from "react";
import { request } from "../../utils/request";
import { Button, IndexBar, List, SearchBar } from "antd-mobile";
const City = () => {
  const [data, setData] = useState({});
  const [list, setList] = useState([]);
  const getData = async () => {
    const resp = await request.get("/city");
    setData(resp.data.data);
    console.log(resp.data.data);
  };
  useEffect(() => {
    getData();
  }, []);
  const [isSearch, setIsSearch] = useState(false);
  const onSearch = async (values) => {
    setIsSearch(true);
    const resp = await request.get("/city/search", { params: { wd: values } });
    console.log(resp.data);
    setList(resp.data.data);
    save(values)
  };

  /***************************************************************************/

  const [seasrchList, setSeasrchList] = useState(
    JSON.parse(localStorage.getItem("searchCityList")) || []
  );
  const save = (values) => {
    setSeasrchList(seasrchList.concat(values))
    localStorage.setItem('searchList', JSON.stringify(seasrchList.concat(values)))
  }
  return (
    <div>
      <SearchBar
        onSearch={onSearch}
        onClear={() => setIsSearch(false)}
      ></SearchBar>
      {isSearch ? (
        <div>
          <List>
            {list.map((v, i) => {
              return <List.Item key={i}>{v.name}</List.Item>;
            })}
          </List>
        </div>
      ) : (
        <div>
          <div>{
              seasrchList.map((v, i) => {
                return <Button key={i}>{v}</Button>
              })
            }</div>
          <IndexBar>
            {data.cityList?.map((v, i) => {
              return (
                <IndexBar.Panel key={i} title={v.title} index={v.title}>
                  <List>
                    {v.citys.map((v, i) => {
                      return <List.Item key={i}>{v.name}</List.Item>;
                    })}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      )}
    </div>
  );
};

export default City;
